跳到主要内容

React Router

提示

2024 年 11 月 21 日 发布了，react-router v7.0.0。 😄 升级指南

现在，合并 Remix 与 React Router，这将是更自由可控的 react ssr 未来。

在过去中当我们选择 react ssr 时会很纠结，选择 nextjs 还是 remixjs。额，选择学习 nextjs 开箱即用 😄 不用学习 remixjs 了。

毕竟，Remix 除了 React Router + Vite 之外还有什么？

那么，Remix 软件包将暂时停产。

升级到 v7​

提示

将 react-router-dom 替换为 react-router

在 v7 中我们不再需要"react-router-dom"，因为包已经简化了。你可以从以下位置导入所有内容"react-router"：

旧的（待删除）​

::: danger 笔记 当前使用 React Router Api 版本 6.20.1；过低的版本可能被废弃 :::

示范​

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

路由模式​

import { createBrowserRouter, createHashRouter } from "react-router-dom";

创建浏览器路由器 这是所有 React Router Web 项目的推荐路由器。它使用 DOM History API 来更新 URL 并管理历史堆栈。

无法配置 Web 服务器，使用 hash 可以解决页面访问空白问题。

参考链接​

https://reactrouter.com/

第 79 期：令人失望的 React Router